<template>
  <div :style="siteStyles_" ref="focusDom" v-if="statePopId > 0 ? true : false"  class="pops-con">
    <div v-if="currentPage" :key="currentPage.id" ref="pop-page" :id="'pop-' + (statePopId)" class="pop-con" :style="currentPopStyles">
      <group-component :item="currentPage" :popId="statePopId"></group-component>
      <i class="jy-icon-layer-closed btn-close" @click="onClose" :class="{ isHideBtnClose: setIsHideBtnClose(currentPage) }"></i>
    </div>
  </div>
</template>
<script>
import { EventBus } from '@/store/index'
import { COMPONENT_TYPES, PAGE_TYPE } from '@/common/const'
import { utils } from '@/components/utils/utils'
import { pageTemplate } from '@/components/utils/page-template'
import { pageLoading } from '@/others/pages/js/page-loading'
import { pageAnimate } from '@/others/pages/js/page-animate'
import { pageCommon } from '@/others/pages/js/page-common'
import { wbBase } from '@/components/utils/wbBase'
import { mapState } from 'vuex'
import { defineAsyncComponent } from 'vue'
import { reactive } from 'vue'
import { MOBILE_WID_HEI } from '@/common/const-dif'
import { getPxOVwByValue } from '@/store/utils'


const components = {
  GroupComponent: defineAsyncComponent(() => import('@/components/group-component.vue')),
}; 

export default {
  mixins: [utils, pageTemplate, pageAnimate, pageLoading, pageCommon, wbBase],
  setup () {
    const state = reactive({
      isHide: true,
      currentPage: null,
    })
    const state_ = {
      popTimer: null,
      isOpenEventPop: true,
      backgroundColor: '',
      opacity: 1,
    }
    _.merge(state, state_)
    return state
  },
  components,
  created() {
    EventBus.$off("showPop")
    EventBus.$on("showPop", this.showLoading)
    EventBus.$off("showPopNoneLoading")
    EventBus.$on("showPopNoneLoading", this.showPopById)

    EventBus.$off("closePop")
    EventBus.$on("closePop", this.onClose)
  },
  computed: {
    ...mapState({
      statePopId: state => state.popId,
      siteInfo: state => state.siteInfo,
      pops: state => state.pops_,
      siteAttrs: state => state.attrs,
      animates: state => state.animates,
      timeObj: state => state.timeObj,
    }),
    siteStyles_() {
      let styles_;
      if(this.currentPage && this.currentPage.attrs.isPopUseSiteBg){
        styles_ = _.cloneDeep(this.siteStyles);
        delete styles_.width;
        delete styles_.height;
      }else{
        styles_ = {};
      }
      styles_.width = this.currentPage ? this.currentPage.styles.width : getPxOVwByValue(MOBILE_WID_HEI.clientWidth);
      styles_.height = this.currentPage ? this.currentPage.styles.height : getPxOVwByValue(MOBILE_WID_HEI.clientHeight);
      if(this.siteInfo.md.isMobile){
        styles_.margin = "0 0"
      }else{
        let wid = this.currentPage ? this.currentPage.attrs.width : MOBILE_WID_HEI.clientWidth;
        styles_.margin = "0 " + getPxOVwByValue((MOBILE_WID_HEI.clientWidth - wid)/2) + "";
      }
      return styles_
    },
    currentPopStyles() {
      let styles_ = {};
      if(this.backgroundColor){
        styles_.backgroundColor = this.backgroundColor;
        styles_.opacity = this.opacity;
       }
      return styles_
    },
  },
  methods: {
    setIsHideBtnClose(pageOrGroup) {
      let isHiddenBtnClose_ = false
      if(pageOrGroup && pageOrGroup.attrs.isAutoClose){
        isHiddenBtnClose_ = true
        return isHiddenBtnClose_
      }
      return this.isHideBtnClose(pageOrGroup)
    },
    isHideBtnClose(pageOrGroup){
      let isHiddenBtnClose_ = false
      const len = pageOrGroup.components.length;
      for(let i = 0; i < len; i++){
       const componentData_ = pageOrGroup.components[i];
        if (componentData_.events.layerClose) {
          isHiddenBtnClose_ = true
          break;
        }
        if (componentData_.components && componentData_.components.length > 0) {
          isHiddenBtnClose_ = this.isHideBtnClose(componentData_)
        }
      }
      return isHiddenBtnClose_
    },
    showPop(popId) {
      this.isOpenEventPop = true
      this.$store.commit('updatePopId', { popId })
      EventBus.$emit("showPop", { popId })
    },
    showLoading({ popId }) {
      this.currentPage = this.pops[popId - 1]
      this.pagePopId = popId;
      this.backgroundColor = this.currentPage.styles.backgroundColor
      this.opacity = this.currentPage.styles.opacity
      this.pageInitEvents()
      
      this.eventPostAddLoading({ popId })

      this.$nextTick(() => {
        //弹层动画自动播放
        const pageId_ = 'pop-' + popId;
        const currentPageDom = document.getElementById(pageId_);
        // if(currentPageDom){
          this.initPlayAllAnimates(currentPageDom);
        // }
      })

      this.autoTriggerEvent();
    },
    showPopById() {
      this.isHide = false
      if (this.currentPage.attrs.isAutoClose) {
        window.clearTimeout(this.popTimer);
        const delayTime = parseInt(this.currentPage.attrs.delayTime) * 1000 || 1000
        this.popTimer = window.setTimeout(() => {
          this.onClose()
        }, delayTime)
      }

      this.isFixIosForm()

      this.$nextTick(() => {
        this.isForbidMove(false)
      })
    },
    searchWbListsById(id, controlId) {
      let controlData = this.controls[id][controlId]
      let wbLists
      if (controlData.data.elements) {
        wbLists = controlData.data.elements
      }
      return wbLists
    },
    onClose() {
      window.clearTimeout(this.popTimer)
      EventBus.$emit("rotate3d", { isPlay: false });
      let isResetShare = false;
      if(this.currentPage && this.currentPage.components){
        isResetShare = this.setIsResetShare(this.currentPage);
      }
      if(isResetShare){
        let shareData = {};
        this.$store.commit("updateShareData", shareData);
      }
      this.isHide = true;
      let popId = 0;
      this.$store.commit('updatePopId', { popId })
      this.isOpenEventPop = true;
      this.isForbidMove(true)
      this.currentPage = null;
    },
    setIsResetShare(currentPage){
      let isResetShare = false;
      _.forEach(currentPage.components, (componentData) => {
        if(componentData.components && componentData.components.length > 0){
          isResetShare = this.setIsResetShare(componentData);
          if(isResetShare){
            return isResetShare
          }
        }else if(componentData.cid == COMPONENT_TYPES.wb_img || componentData.cid == COMPONENT_TYPES.wb_text){
          if(componentData.commonAttr.isDynamic){
            isResetShare = true
            return isResetShare
          }
        }
      })
      return isResetShare;
    }
  },
  mounted() {
    if(this.pops && this.statePopId > 0 && this.pops[this.statePopId-1]) {
      this.showLoading({ popId: this.statePopId });
    }
  },
  beforeUnmount(){
    EventBus.$off("showPop")
    EventBus.$off("showPopNoneLoading")
    EventBus.$off("closePop")
    window.clearTimeout(this.popTimer)
    this.popTimer = null;
  },
};
</script>

